<template>
    <div id="bigDiv">
        <head-2 />
        <div id="bigTitle">数字“红娘”</div>
        <div id="contentDiv">
            <div id="content">
            </div>
        </div>
        <div id="GameOver" v-if="isEnd">
            <div id="endTittle">游戏结束</div>
            <div>
                <img src="https://pic2.imgdb.cn/item/644a7a5d0d2dde5777f7ace4.jpg" alt="" />
                <p>{{ res }}</p>
            </div>
            <div id="btn">
                <el-button type="success" size="small" @click="onceAgain">再来一次</el-button>
                <el-button type="success" size="small" @click="goBack">返回首页</el-button>
            </div>
        </div>
    </div>
</template>
  
<script>
import head2 from '@/components/Head/head2.vue'
export default {
    components: { head2 },
    data() {
        return {
            countDwon: 10,
            isEnd:true,
        }
    },
    mounted() {
        //   this.contDwon()
        this.getPaizi()
    },
    methods: {
        
        onceAgain(){
            var paiZICenter = document.getElementById("content");//中间大界面
            paiZICenter.innerHTML=""
            this.isEnd=!this.isEnd
            this.getPaizi()
        },
        goBack(){
            this.$router.push("/home")
        },
        lookEnd(){
            this.isEnd=!this.isEnd
        },
        getPaizi() {
            const content=this
            var paiZICenter = document.getElementById("content");//中间大界面
            console.log(paiZICenter)
            var paiZi = document.getElementsByClassName("paizi");//获取牌子元素
            var arrFuHao = ["+", "-", "*", "/"];//总共符号
            var arrAll = [];//生成内容数组
            var first, second;//承载第一和第二位数
            var tongguo = document.getElementById("pass")//调取游戏结束画面
            for (var j = 0; j < 5; j++) {
                var rodomNumber0 = Math.floor(Math.random() * 4)//随机符号
                var rodomNumber1 = Math.floor(Math.random() * 20)//随机第一位数
                var rodomNumber2 = Math.floor(Math.random() * 20)//随机第二位数
                switch (arrFuHao[rodomNumber0]) {//根据随机符号出题
                    case "+":
                        first = rodomNumber1 + arrFuHao[rodomNumber0] + rodomNumber2
                        second = eval(rodomNumber1 + arrFuHao[rodomNumber0] + rodomNumber2)
                        break;
                    case "-":
                        if (rodomNumber1 - rodomNumber2 < 0) {
                            first = rodomNumber2 + arrFuHao[rodomNumber0] + rodomNumber1
                            second = eval(rodomNumber2 + arrFuHao[rodomNumber0] + rodomNumber1)
                        }
                        else {
                            first = rodomNumber1 + arrFuHao[rodomNumber0] + rodomNumber1
                            second = eval(rodomNumber1 + arrFuHao[rodomNumber0] + rodomNumber1)
                        }
                        break;
                    case "*":
                        first = rodomNumber1 + "×" + rodomNumber2
                        second = eval(rodomNumber1 + arrFuHao[rodomNumber0] + rodomNumber2)
                        break;
                    case "/":
                        first = rodomNumber1 * (rodomNumber2 + 1) + "÷" + (rodomNumber2 + 1)
                        second = eval(rodomNumber1 * (rodomNumber2 + 1) + arrFuHao[rodomNumber0] + (rodomNumber2 + 1))
                }
                arrAll.push(first, second);//方便统计对错
            }

            var newArrALL = arrAll.sort((a, b) => {//随机打乱生成的数组
                return Math.random() > 0.5 ? -1 : 1
            }
            )
            for (var i = 0; i < 10; i++) {
                var newdiv = document.createElement("div");//创建最外层
                var secondDiv = document.createElement("div");//创建内容结构
                var thridDiv1 = document.createElement("div");//创建前页面"?"
                var thridDiv2 = document.createElement("div");//创建后面页面内容
                newdiv.alt = i
                newdiv.className = "paizi";
                secondDiv.className = "content";
                thridDiv1.className = "qian";
                thridDiv1.innerText = "?";

                thridDiv2.className = "hou";
                thridDiv2.innerText = newArrALL[i];

                newdiv.appendChild(secondDiv);
                secondDiv.appendChild(thridDiv1);
                secondDiv.appendChild(thridDiv2);
                paiZICenter.appendChild(newdiv);
                console.log( secondDiv.className,thridDiv2.className,thridDiv1.className)
            }
            var panduan = [];//判断游戏进程
            var panduan2 = []//判断是否做完题木
            var t1, t2;
            Array.from(paiZi).forEach((el, index) => {
                el.onclick = function () {
                    if (panduan.length > 1) {
                        panduan = panduan.slice(-1)
                    }
                    panduan.push(index)
                    this.firstElementChild.style.transform = "rotateX(180deg)";
                    // console.log(String(newArrALL[index]).replace("×","*").replace("÷","/"),index)
                    var zuo = eval(this.firstElementChild.lastElementChild.innerHTML.replace("×", "*").replace("÷", "/"))
                    var you = eval(String(newArrALL[panduan[panduan.length - 2]]).replace("×", "*").replace("÷", "/"))
                    // console.log(eval(el.firstElementChild.lastElementChild.innerHTML.replace("×","*").replace("÷","/")),eval(newArrALL[panduan.length-1]))
                    if (zuo == you && panduan[panduan.length - 2] != index) {//防止自己点击自己同时判断结果
                        t1 = setTimeout(function () {
                            el.style.visibility = "hidden";
                            // console.log(el.style.visibility,index,"当前点击");
                            // console.log(paiZi[panduan[panduan.length-2]].style.visibility,panduan[panduan.length-2],"系统寻找");
                            paiZi[panduan[panduan.length - 2]].style.visibility = "hidden";
                        }, 1000);
                        panduan2.push(1111, 2222)//配对成功后添加数组
                    }
                    t2 = setTimeout(function () {//每次点击后牌子返回去
                        el.firstElementChild.style.transform = "rotateX(0deg)";
                    }, 2500)
                    if (panduan2.length == 12) {//游戏胜利弹出界面
                        setTimeout(function () {
                            // tongguo.style.display = "block"
                            content.isEnd=!content.isEnd
                        }, 2000)
                    }

                }

            })
        }
    }
}
</script>
  
<style lang="less">
#GameOver {
    width: 80vw;
    height: 65vh;
    background-color: rgb(218, 225, 218);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    #endTittle {
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 1px;
        font-weight: bold;
    }
    p {
        font-size: 18px;
        color: red;
        font-weight: bold;
        margin-bottom: 5vh;
        letter-spacing: 2px;
    }
    img {
        margin: 6vh auto 1vh;
        width: 90%;
        height: 30vh;
        object-fit: cover;
    }
    #btn {
        display: flex;
        justify-content: space-evenly;
        bottom: 0;
    }
}
#content {
    transition: all 0.5s;
    perspective: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

.paizi {
    width: 40vw;
    height: 12vh;
    line-height: 12vh;
    background-color: #c4d4af;
    margin-top: 2vh;
    color: white;
    font-size: 18px;
    text-align: center;
    /* background-color: transparent; */
}

.content {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: all 1s;
    animation-name: example;
    animation-duration: 4s;
    transform-style: preserve-3d;
}

.qian,
.hou {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 隐藏背面*/
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.qian {
    background-color: #f0531e;
    font-size: 18px
}

.hou {
    transform: rotateX(180deg);
    font-size: 18px
}

@keyframes example {
    0% {
        transform: rotateX(0deg);
    }

    40% {
        transform: rotateX(180deg);
    }

    50% {
        transform: rotateX(180deg);
    }

    100% {
        transform: rotateX(0deg);
    }
}

#bigDiv {
    height: 100vh;

    #bigTitle {
        font-weight: bold;
        font-size: 22px;
        margin-top: 20px;
        letter-spacing: 3px;
    }


    // #contentDiv{
    //   height: 40vh;
    //   display: flex;
    //   justify-content: space-around;
    //   align-items: center;
    //   div{
    //     width: 15vw;
    //     height: 15vw;
    //     line-height: 15vw;
    //     font-size: 20px;
    //     background-color: yellow;
    //   }
    // }
}</style>